<template>
<div>
  <userItem></userItem>
  <asideRouteStudent current-page="2-4"></asideRouteStudent>
  <div id="main">
    <div id="chartplace">
      <div id="myChart" :style="{width: '60%' , height: '350%'}"></div>
      <el-button v-on:click="rnk">课程排名</el-button>
      <el-button v-on:click="r1nk">本系排名</el-button>
      <el-button v-on:click="r2nk">本班排名</el-button>
    </div>
  </div>

  <div>
    <el-dialog
        title="我的排名"
        :visible.sync="dialogVisible"
        width="31%">
        <el-table
            :data="this.rank"
            border
            stripe
            max-height="350px">
          <el-table-column
              prop="course"
              label="课程"
              width="180">
          </el-table-column>
          <el-table-column
            prop="rank"
            label="排名"
            width="180">
        </el-table-column>
        </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="我的排名"
        :visible.sync="dialog1Visible"
        width="31%">
      <el-table
          :data="this.periodrank"
          border
          stripe
          max-height="350px">
        <el-table-column
            prop="course"
            label="课程"
            width="180">
        </el-table-column>
        <el-table-column
            prop="rank"
            label="排名"
            width="180">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialog1Visible = false">取 消</el-button>
    <el-button type="primary" @click="dialog1Visible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="我的排名"
        :visible.sync="dialog2Visible"
        width="31%">
      <el-table
          :data="this.classidrank"
          border
          stripe
          max-height="350px">
        <el-table-column
            prop="course"
            label="课程"
            width="180">
        </el-table-column>
        <el-table-column
            prop="rank"
            label="排名"
            width="180">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialog2Visible = false">取 消</el-button>
    <el-button type="primary" @click="dialog2Visible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</div>
</template>

<script>
import userItem from "../components/userItem";
import asideRouteStudent from "../components/asideRouteStudent";
import * as echarts from 'echarts';
import request from "../../utils/request";


export default {
  name: "gradesBrowser",
  components:{
    userItem,
    asideRouteStudent,
  },
  data() {
    request.post("api/selectandgrade/stuquery",sessionStorage.getItem("user")).then(res=>{
      this.itemData=res.data;

      for(let i=0;i<this.itemData.length;i++){
        this.xaxis.push(this.itemData[i].course);
        this.yaxis.push(this.itemData[i].grade);
      }

      for(let i=0;i<this.itemData.length;i++){
        request.post("api/selectandgrade/namequery",this.itemData[i].course).then(res=>{
          this.sortList=res.data;
          this.sortList.sort(function (a,b){return a.grade-b.grade});
          for(let j=this.sortList.length-1;j>=0;j--){
            if(this.itemData[i].student===this.sortList[j].student){
              this.rank[i]={rank:this.sortList.length-j,course:this.itemData[i].course};
              break;
            }
          }
        })
      }

      for(let i=0;i<this.itemData.length;i++){
        request.post("api/selectandgrade/namequeryplusperiod",this.itemData[i]).then(res=>{
          this.sortList=res.data;
          this.sortList.sort(function (a,b){return a.grade-b.grade});
          for(let j=this.sortList.length-1;j>=0;j--){
            if(this.itemData[i].student===this.sortList[j].student){
              this.periodrank[i]={rank:this.sortList.length-j,course:this.itemData[i].course};
              break;
            }
          }
        })
      }

      for(let i=0;i<this.itemData.length;i++){
        request.post("api/selectandgrade/namequeryplusclassid",this.itemData[i]).then(res=>{
          this.sortList=res.data;
          this.sortList.sort(function (a,b){return a.grade-b.grade});
          for(let j=this.sortList.length-1;j>=0;j--){
            if(this.itemData[i].student===this.sortList[j].student){
              this.classidrank[i]={rank:this.sortList.length-j,course:this.itemData[i].course};
              break;
            }
          }
        })
      }

      console.log(this.rank)
      console.log(this.periodrank)
      console.log(this.classidrank)
      this.drawLine();
    });
    return {
      itemData:[],
      xaxis:[],
      yaxis:[],
      rank:[],
      demorank:[],
      periodrank:[],
      classidrank:[],
      options:[],
      myChart:'',
      sortList:[],
      ranklst:this.rank,
      dialogVisible:false,
      dialog1Visible:false,
      dialog2Visible:false,
    }
  },
  mounted(){
    this.drawLine();
  },
  methods:{
    rnk(){
      this.dialogVisible=true;
    },
    r1nk(){
      this.dialog1Visible=true;
    },
    r2nk(){
      this.dialog2Visible=true;
    },
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      // 绘制图表
      myChart.setOption({
        title: { text: '成绩图' },
        tooltip: {},
        xAxis: {
          data:this.xaxis
        },
        yAxis: {
        },
        series: [
          {
            name: '成绩',
            type: 'bar',
            data: this.yaxis,
            label:{
            show:true,
              position:"top",
            }
          },
        ]
      });
    },
  },

}
</script>

<style scoped>
#main{
   position:absolute;
   right: 0;
   width: 70%;
   margin-top: 10px;
   z-index: -1;
 }
#chartplace{
  margin-top: 60px;
}

</style>
